<template>
  <div class="main">
    <div class="topTitle">{{ props.title }}</div>
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <NSpace>
              <NForm
                ref="formRef"
                require-mark-placement="left"
                label-placement="left"
                :rules="rules"
                :label-width="100"
                :model="formValue"
              >
                <NFormItem
                  label="分类名称:"
                  path="menuName"
                >
                  <NInput
                    class="commonWidth"
                    v-model:value="formValue.menuName"
                    placeholder="输入流程分类"
                    :allow-input="stopNull"
                  />
                </NFormItem>
                <NFormItem
                  label="状态:"
                  path="status"
                >
                  <NSelect
                    class="commonWidth"
                    placeholder="请选择状态"
                    v-model:value="formValue.status"
                    :options="[
                      { label: '启用', value: 1 },
                      { label: '停用', value: 2 }
                    ]"
                  ></NSelect>
                </NFormItem>
                <NFormItem
                  label="备注:"
                  path="notes"
                >
                  <NInput
                    class="commonWidth"
                    v-model:value="formValue.notes"
                    type="textarea"
                    style="min-height: 130rem"
                    placeholder="输入备注"
                    :allow-input="stopNull"
                  />
                </NFormItem>
              </NForm>
            </NSpace>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <NSpace justify="center">
      <NButton
        ghost
        @click="goBack"
        style="width: 78px"
      >
        取消
      </NButton>
      <NButton
        type="primary"
        @click="confirm"
        style="width: 78px"
      >
        保存
      </NButton>
    </NSpace>
  </FixedAction>
  <NModal
    :auto-focus="false"
    v-model:show="modalVisible"
  >
    <VDialogContent
      @close="modalVisible = false"
      @submit="againConfirm"
      title="保存提示"
    >
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        您确定要保存吗?
      </div>
    </VDialogContent>
  </NModal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import {
  NSpace,
  NForm,
  NInput,
  NFormItem,
  NButton,
  useMessage,
  NScrollbar,
  NSpin,
  NModal,
  NSelect
} from 'naive-ui'
import type { FormInst } from 'naive-ui'
import router from '@/router'
import { useRoute } from 'vue-router'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import type { HttpResponse } from '@/utils/http'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'

const message = useMessage()
const route = useRoute()
const tags = useTagStore().tags
const props = defineProps({
  id: {
    type: [Number, String]
  },
  title: { type: String, default: () => '移动端自定义常用配置链接新增' }
})

//去除空格
const stopNull = (value: string) => {
  return !value.startsWith(' ') && !value.endsWith(' ')
}

const formRef = ref<FormInst | null>(null)
const formValue: any = ref({
  menuName: null,
  status: null,
  notes: null
})
const rules: any = {
  menuName: {
    required: true,
    trigger: ['input', 'blur'],
    validator: (_: any, value: any) => {
      if (!value) return new Error('输入流程分类名称')
      //   if (value.length > 10) return new Error('名称字数不得超过10')
      return true
    }
  },
  status: {
    type: 'any',
    required: true,
    message: '请选择状态',
    trigger: ['change', 'blur']
  }
  //   remarks: {
  //     required: true,
  //     trigger: ['input', 'blur'],
  //     validator: (_: any, value: any) => {
  //       if (!value) return new Error('请输入备注')
  //       if (value.length > 100) return new Error('备注字数不得超过100')
  //       return true
  //     }
  //   }
}
// 流程类型详情
const spinShow = ref(false)
const getInfo = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest({
    module: 'customProcessConfig',
    api: 'selectWorkflowMenuDetail',
    override: {
      params: {
        id: route.query?.id as never
      }
    }
  })
  if (error) return message.error(error.message)
  Object.keys(formValue.value).map((it: any) => {
    formValue.value[it] = res.data[it]
  })
  formValue.value.status = formValue.value.status ? 1 : 2
  spinShow.value = false
}
// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  tags.splice(index, 1)
  router.push({ path: '/OA/Office/customProcessTypeSetting' })
}
// 确定
const modalVisible = ref(false)
const confirm = () => {
  formRef.value?.validate(async (err: any) => {
    if (err) return
    modalVisible.value = true
  })
}
// 新增
const againConfirm = async () => {
  let params = JSON.parse(JSON.stringify(formValue.value))
  params.status = params.status == 1 ? true : false
  if (!route.query?.id) {
    const [error, res] = await sendRequest<HttpResponse>({
      module: 'customProcessConfig',
      api: 'saveWorkflowMenu',
      override: {
        data: {
          ...params
        }
      }
    })
    if (error) return message.error(error.message)
    if (res.code !== 0) return message.error(res.msg)
    message.success(res.msg)
    goBack()
  } else {
    const [error, res] = await sendRequest<HttpResponse>({
      module: 'customProcessConfig',
      api: 'updateWorkflowMenu',
      override: {
        data: {
          id: route.query?.id,
          ...params
        }
      }
    })
    if (error) return message.error(error.message)
    if (res.code !== 0) return message.error(res.msg)
    message.success(res.msg)
    modalVisible.value = false
    goBack()
  }
}

watch(
  () => route.query?.id,
  () => {
    if (route.query?.id && props.title == '流程分类编辑') getInfo()
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
  width: 360rem;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    height: 64rem;
    border-bottom: 1px solid #fff;
    padding: 20rem;
    margin-bottom: 20rem;
    @include CommonFont;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .content {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;

      .scope {
        width: 360rem;
        height: 130rem;
        background: #e1e1e1;
        margin-bottom: 25rem;
      }
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
